<template>
  <div style="padding: 0 10px">
    <el-tabs v-model="activeName" :stretch="true">
      <el-tab-pane label="关联视频" name="first">
        <div class="_tab">
          <div v-for="(item,i) in folderVideoList" :key="i" class="_item">
            <div>
              <img style="border-radius: 5px" align="center" width="120px" height="80px" :src="item.projectFile.videoPic"/>
            </div>
            <div>
              <div class="_line1">{{item.projectFile.name}}</div>
              <div class="_line2">
                <svg-icon class="_svg" size="32px" name="喜欢"></svg-icon>
                <div class="_svg-text">{{item.collection}}</div>
                <svg-icon class="_svg" size="32px" style="margin-left: 15px" name="点赞"></svg-icon>
                <div class="_svg-text">{{item.thumbsUp}}</div>
              </div>
            </div>
          </div>
          <my-empty v-if="folderVideoList.length == 0"></my-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="热度排行" name="second">
        <div class="_tab">
          <div v-for="(item,i) in hotVideoList" :key="i" class="_item">
            <div>
              <img style="border-radius: 5px" align="center" width="120px" height="80px" :src="item.projectFile.videoPic"/>
            </div>
            <div>
              <div class="_line1">{{item.projectFile.name}}</div>
              <div class="_line2">
                <svg-icon class="_svg" size="32px" name="喜欢"></svg-icon>
                <div class="_svg-text">{{item.collection}}</div>
                <svg-icon class="_svg" size="32px" style="margin-left: 15px" name="点赞"></svg-icon>
                <div class="_svg-text">{{item.thumbsUp}}</div>
              </div>
            </div>
          </div>
          <my-empty v-if="hotVideoList.length == 0"></my-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频评论" name="three">
        <div class="_tab">
          <el-timeline style="margin-top: 10px">
            <el-timeline-item v-for="(item,i) in noteList" :timestamp="item.createTime" placement="top" :key="i">
              <el-card>
                <p>{{item.note}}</p>
                <div style="float: right;margin: 10px;">
                  <el-avatar style="vertical-align: middle" :src="item.avatar"></el-avatar>
                  {{item.user}}
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <my-empty v-if="noteList.length == 0"></my-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "video-list",
    props: {
      video: {
        type: Object,
        required: true
      },
      active: {
        type: String
      }
    },
    data(){
      return{
        activeName: 'first',
        folderVideoList: [],
        hotVideoList: [],
        noteList: []
      }
    },
    methods:{

    },
    created() {

    },
    watch:{
      /** 监听tabs滚动 **/
      activeName(val){
        if(val == 'first'){
          this.$ajax.getVideoByFolder(this.video.folder).then(res =>{
            this.folderVideoList = res;
          })
        }else if(val == 'second'){
          this.$ajax.getVideoByHot().then(res =>{
            this.hotVideoList = res;
          })
        }else{
          this.$ajax.getVideoNote(this.video.id).then(res=>{
            this.noteList = res;
          })
        }
      },
      /** 监听video **/
      video:{
        deep: true,
        immediate: true,
        handler(val){
          if(val.folder){
            if(this.activeName == 'first'){
              this.$ajax.getVideoByFolder(val.folder).then(res =>{
                this.folderVideoList = res;
              })
            }else if(this.activeName == 'second'){
              this.$ajax.getVideoByHot().then(res =>{
                this.hotVideoList = res;
              })
            }else{
              this.$ajax.getVideoNote(this.video.id).then(res=>{
                this.noteList = res;
              })
            }
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ._line1{
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
    font-size: 18px;
    padding-top: 10px;
    line-height: 20px;
    color: #606266;
  }
  ._line2{
    box-sizing: border-box;
    height: 40px;
  }
  ._svg{
    box-sizing: border-box;
    display: inline-block;
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    color: orange;
  }
  ._svg-text{
    box-sizing: border-box;
    display: inline-block;
    margin-top: 5px;
    color: grey;
    display: inline-block;
    font-size: 16px;
  }
  ._item{
    box-sizing:border-box;
    margin-top: 10px;
    padding: 5px;
    display: grid;
    grid-template-columns: 4fr 7fr;
    border: 1px solid lightgrey;
    border-radius: 10px
  }
  ._tab{
    height: 64vh;
    overflow-y: auto;
  }
  ::v-deep.el-timeline{
    padding-left: 1px;
  }
</style>
